<template>
  <div class="dp_content">
    <nav class="dp_nav">
      <div class="dp_title1">
        <div class="title1_select">
          <div class="screenfull" @click="screenfull">点击全屏</div>
          <div>
            <el-select
              :teleported="false"
              v-model="value1"
              placeholder="选择考点"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <el-select
              :teleported="false"
              v-model="value2"
              placeholder="选择车号"
              @change="changeHandle"
            >
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <dv-decoration-8
          :color="['#2063b5', '#2063b5']"
          style="width: 5rem; height: 0.3rem"
        />
      </div>
      <div class="dp_title2">
        <div class="title">安徽省特种设备作业人员考试平台</div>
        <dv-decoration-5
          :color="['#2063b5', '#bedbfd']"
          style="width: 8rem; height: 0.31rem; margin: 0 auto"
        />
      </div>
      <div class="dp_title3">
        <div class="dp_timer">
          <div class="timer_same">{{ dateYear }}</div>
          <div class="timer_same">{{ dateWeek }}</div>
          <div>{{ dateDay }}</div>
        </div>
        <dv-decoration-8
          :color="['#2063b5', '#2063b5']"
          :reverse="true"
          style="width: 5rem; height: 0.3rem"
        />
      </div>
    </nav>
    <article class="dp_article">
      <section class="article_left">
        <div class="examinee_info">
          <div class="examinee_top">
            <img src="../assets/dpPicture/userInfo.png" alt="" />
            <span>考生信息</span>
          </div>
          <div class="examinee_under">
            <img :src="'data:image/png;base64,' + textInfo.zp" alt="" />
            <div>
              <div class="name">
                <div>{{ textInfo.xm }}</div>
                <span>({{ textInfo.kszt }})</span>
              </div>
              <div class="idcard">
                <div>证件号：</div>
                <span>{{ textInfo.sfzmhm }}</span>
              </div>
              <div class="textNum">
                <div>考试批次：</div>
                <span>{{ textNum }}</span>
              </div>
              <div class="car_num">{{ KCH }}</div>
            </div>
          </div>
        </div>
        <div class="camera_info">
          <div class="camera_top">
            <img src="../assets/dpPicture/camera.png" alt="" />
            <span>数字裁判</span>
          </div>
          <div class="camera_under">
            <div class="score">
              <span class="tips">实操得分</span>
              <div class="num">
                <span>{{ textInfo.kscj }}</span>
                <div>分</div>
              </div>
            </div>
            <div class="status">
              <div>
                <img src="../assets/dpPicture/timer.png" alt="" />
                <div>
                  <span>操作时长</span>
                  <div>{{ textTime }}</div>
                </div>
              </div>
              <div>
                <img src="../assets/dpPicture/type.png" alt="" />
                <div>
                  <span>实操类型</span>
                  <div>{{ textType }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="deduction_info">
          <div class="deduction_top">
            <img src="../assets/dpPicture/deduction.png" alt="" />
            <span>扣分信息</span>
          </div>
          <div class="deduction_under">
            <el-carousel
              v-if="textInfo.kfInfos"
              :interval="4000"
              type="card"
              height="2rem"
            >
              <el-carousel-item
                v-for="item in textInfo.kfInfos"
                :key="item.index"
              >
                <div class="deduction_score">
                  <div>
                    扣分值：
                    <span>{{ item.kfz }}</span>
                  </div>
                  <div>扣分时间:{{ item.kfsj }}</div>
                  <div class="deduction_info">
                    <div>
                      扣分描述：
                      {{ item.kfms }}
                    </div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
            <div
              v-if="!textInfo.kfInfos"
              style="color: #ffffff; font-size: 0.4rem; margin-top: 1rem"
            >
              暂无扣分项目
            </div>
          </div>
        </div>
      </section>
      <section class="article_center">
        <div class="site">
          <div>驾驶室监控</div>
          <div v-if="!TDH[1]">
            <div>安徽省特种设备检测院</div>
            <img src="../assets/dpPicture/cabCamera.png" alt="" />
            <p>暂无监控画面</p>
          </div>
          <Video :rtsp="rtspurl2" ref="video2"></Video>
        </div>
        <div class="cab">
          <div>场地监控</div>
          <!-- <div v-if="!TDH[0]">
            <div>安徽省特种设备检测院</div>
            <img src="../assets/dpPicture/cabCamera.png" alt="" />
            <p>暂无监控画面</p>
          </div> -->
          <Video :rtsp="rtspurl1" ref="video1"></Video>
        </div>
      </section>
      <section class="article_right">
        <div class="operation_info">
          <div class="operation_top">
            <img src="../assets/dpPicture/operation.png" alt="" />
            <span>运行管理</span>
          </div>
          <div class="position_info">
            <span>定位数据:</span>
            <p>{{ GPSSTR }}</p>
          </div>
          <div class="content_info">
            <!-- <div>
              <span>方向盘角速度:</span>
              <p>123.456</p>
            </div> -->
            <div>
              <span>货叉高度:</span>
              <p>{{ HCGD }}</p>
            </div>
            <!-- <div>
              <img src="../assets/dpPicture/wifi.png" alt="" />
              <p>有信号</p>
            </div> -->
          </div>
          <div class="icon_info">
            <div>
              <img
                v-if="CLXHSTR[0] == '1'"
                src="../assets/dpPicture/caozuogan.png"
                alt=""
              />
              <img v-else src="../assets/dpPicture/caozuogan_no.png" alt="" />
              <div>操作杆</div>
            </div>
            <div>
              <img
                v-if="CLXHSTR[1] == '1'"
                src="../assets/dpPicture/kongdang.png"
                alt=""
              />
              <img v-else src="../assets/dpPicture/kongdang_no.png" alt="" />
              <div>空档</div>
            </div>
            <div>
              <img
                v-if="CLXHSTR[2] == '1'"
                src="../assets/dpPicture/fadongji.png"
                alt=""
              />
              <img v-else src="../assets/dpPicture/fadongji_no.png" alt="" />
              <div>发动机</div>
            </div>
            <div>
              <img
                v-if="CLXHSTR[3] == '1'"
                src="../assets/dpPicture/laba.png"
                alt=""
              />
              <img v-else src="../assets/dpPicture/laba_no.png" alt="" />
              <div>喇叭</div>
            </div>
            <div>
              <img
                v-if="CLXHSTR[4] == '1'"
                src="../assets/dpPicture/shousha.png"
                alt=""
              />
              <img v-else src="../assets/dpPicture/shousha_no.png" alt="" />
              <div>手刹</div>
            </div>
            <div>
              <img
                v-if="CLXHSTR[5] == '1'"
                src="../assets/dpPicture/huowu.png"
                alt=""
              />
              <img v-else src="../assets/dpPicture/huowu_no.png" alt="" />
              <div>货物</div>
            </div>
            <!-- 操作杆，空档，发动机，喇叭，手刹，货物，安全带，左转，座 位，绕车1，
             绕车2，出窗外，后倾，右转，乘客，离合，低速，高速，货叉距离，平放，运动（1和2运动， 0停车） -->
            <div>
              <img
                v-if="CLXHSTR[6] == '1'"
                src="../assets/dpPicture/anquandai.png"
                alt=""
              />
              <img v-else src="../assets/dpPicture/anquandai_no.png" alt="" />
              <div>安全带</div>
            </div>
            <div>
              <img
                v-if="CLXHSTR[7] == '1'"
                src="../assets/dpPicture/zuozhuanxiang.png"
                alt=""
              />
              <img
                v-else
                src="../assets/dpPicture/zuozhuanxiang_no.png"
                alt=""
              />
              <div>左转向</div>
            </div>
            <div>
              <img
                v-if="CLXHSTR[9] == '1'"
                src="../assets/dpPicture/raoche1.png"
                alt=""
              />
              <img v-else src="../assets/dpPicture/raoche1_no.png" alt="" />
              <div>绕车1</div>
            </div>
            <div>
              <img
                v-if="CLXHSTR[10] == '1'"
                src="../assets/dpPicture/raoche2.png"
                alt=""
              />
              <img v-else src="../assets/dpPicture/raoche_no2.png" alt="" />
              <div>绕车2</div>
            </div>
            <div>
              <img
                v-if="CLXHSTR[11] == '1'"
                src="../assets/dpPicture/chuchuangwai.png"
                alt=""
              />
              <img
                v-else
                src="../assets/dpPicture/chuchuangwai_no.png"
                alt=""
              />
              <div>出窗外</div>
            </div>
            <div>
              <img
                v-if="CLXHSTR[12] == '1'"
                src="../assets/dpPicture/houqing.png"
                alt=""
              />
              <img v-else src="../assets/dpPicture/houqing_no.png" alt="" />
              <div>后倾</div>
            </div>

            <div>
              <img
                v-if="CLXHSTR[13] == '1'"
                src="../assets/dpPicture/youzhuanxiang.png"
                alt=""
              />
              <img
                v-else
                src="../assets/dpPicture/youzhuanxiang_no.png"
                alt=""
              />
              <div>右转向</div>
            </div>
            <div>
              <img
                v-if="CLXHSTR[14] == '1'"
                src="../assets/dpPicture/chengke.png"
                alt=""
              />
              <img v-else src="../assets/dpPicture/chnegke_no.png" alt="" />
              <div>乘客</div>
            </div>
            <div>
              <img
                v-if="CLXHSTR[15] == '1'"
                src="../assets/dpPicture/lihe.png"
                alt=""
              />
              <img v-else src="../assets/dpPicture/lihe_no.png" alt="" />
              <div>离合</div>
            </div>
            <div>
              <img
                v-if="CLXHSTR[16] == '1'"
                src="../assets/dpPicture/disu.png"
                alt=""
              />
              <img v-else src="../assets/dpPicture/disu_no.png" alt="" />
              <div>低速</div>
            </div>
            <div>
              <img
                v-if="CLXHSTR[17] == '1'"
                src="../assets/dpPicture/gaosu.png"
                alt=""
              />
              <img v-else src="../assets/dpPicture/gaosu_no.png" alt="" />
              <div>高速</div>
            </div>
            <div>
              <img
                v-if="CLXHSTR[19] == '1'"
                src="../assets/dpPicture/pingfang.png"
                alt=""
              />
              <img v-else src="../assets/dpPicture/pingfang_no.png" alt="" />
              <div>平放</div>
            </div>
            <div>
              <img
                v-if="CLXHSTR[20] == '1' || CLXHSTR[20] == '2'"
                src="../assets/dpPicture/yundong.png"
                alt=""
              />
              <img v-else src="../assets/dpPicture/yundong_no.png" alt="" />
              <div>运动</div>
            </div>
            <div>
              <!-- <img
                v-if="CLXHSTR[20] == '1'"
                src="../assets/dpPicture/qianqing.png"
                alt=""
              /> -->
              <img src="../assets/dpPicture/qianqing_no.png" alt="" />
              <div>前倾</div>
            </div>
            <div>
              <img
                v-if="CLXHSTR[20] == '0'"
                src="../assets/dpPicture/tingche.png"
                alt=""
              />
              <img v-else src="../assets/dpPicture/tingche_no.png" alt="" />
              <div>停车</div>
            </div>
          </div>
        </div>
        <div class="lines_info">
          <div style="position: relative">
            <div>
              <span>轨迹</span>
              <div></div>
            </div>
            <canvas
              ref="canvas"
              style="position: absolute; top: 20; left: 0; width: 4.9rem"
            ></canvas>
            <canvas
              ref="canvas2"
              style="position: absolute; top: 20; left: 0; width: 4.9rem"
            ></canvas>
          </div>
        </div>
        <div class="statistics">
          <div class="operation_top">
            <img src="../assets/dpPicture/tongji.png" alt="" />
            <span>考生统计</span>
          </div>
          <!-- <div class="statistics_content">
            <div class="statistics_dd">
              <div class="title">等待上车考生:</div>
              <div class="info_message">
                <span>
                  {{ GetStuQueen.hkName }}
                </span>
                <span>{{ GetStuQueen.kch }}号车</span>
                <span> ({{ maskIdCard(GetStuQueen.hkSfzh) }}) </span>
              </div>
            </div>
            <div class="statistics_pd">
              <div class="title">排队等候考生:</div>
              <div
                class="content_message"
                v-for="(value, index) in GetWaitStus"
                :key="index"
              >
                <div>
                  <span> 姓名： {{ value.xm }} </span>
                  <span> 身份证号：({{ maskIdCard(value.sfzmhm) }}) </span>
                </div>
              </div>
            </div>
          </div> -->
          <div class="operation_info">
            <div class="info_card">
              <img src="../assets/dpPicture/zongshu.png" alt="" />
              <div class="card_right">
                <div>
                  <span>{{ tjxx.zrs }}</span>
                  <p>位</p>
                </div>
                <span>总考人数</span>
              </div>
            </div>
            <div class="info_card">
              <img src="../assets/dpPicture/yikao.png" alt="" />
              <div class="card_right">
                <div>
                  <span>{{ tjxx.ykrs }}</span>
                  <p>位</p>
                </div>
                <span>已考人数</span>
              </div>
            </div>
            <div class="info_card">
              <img src="../assets/dpPicture/weikao.png" alt="" />
              <div class="card_right">
                <div>
                  <span>{{ tjxx.wkrs }}</span>
                  <p>位</p>
                </div>
                <span>未考人数</span>
              </div>
            </div>
            <div class="info_card">
              <img src="../assets/dpPicture/hege.png" alt="" />
              <div class="card_right">
                <div>
                  <span>{{ tjxx.hgl }}</span>
                </div>
                <span>合格率</span>
              </div>
            </div>
          </div>
        </div>
      </section>
    </article>
  </div>
</template>
<script>
import { formatTime } from "../untils/timer.js"; //日期格式转换
import Video from "../components/video.vue";
import $api from "../untils/api.js";
import screenfull from "screenfull";
export default {
  data() {
    return {
      GetStuQueen: [],
      GetWaitStus: [],
      //时分秒
      dateDay: null,
      //年月日
      dateYear: null,
      //周几
      dateWeek: null,
      //周几
      weekday: [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ],
      options: [
        {
          value: "选项1",
          label: "第一考点",
        },
        {
          value: "选项2",
          label: "第二考点",
        },
        {
          value: "选项3",
          label: "第三考点",
        },
      ],
      options2: [],
      value1: "",
      value2: "2",
      rtspurl1: "",
      rtspurl2: "",
      socket: null,

      CLXHSTR: "", //车辆运行状态
      GPSSTR: "", //车辆轮廓
      TDH: "", //通道号
      CX: "", //车型
      STUSTR: "", //考生考试信息
      KCH: "", //考车号

      SFZ: "", //身份证号码
      ID: "", //考生ID，
      textNum: "", //考试次数，
      textType: "", //考试类型(1,场考 2路考)
      textTime: "", //考试时长
      HCGD: "", //货叉高度
      shapes: [
        // ID=A11
        {
          type: "poly",
          points: [
            [-0.446, 7.339],
            [-5.073, 6.723],
            [-4.868, 4.742],
            [-0.211, 5.339],
          ],
          color: "yellow",
        },
        // ID=C13
        {
          type: "poly",
          points: [
            [-18.928, 5.463],
            [-18.658, 2.575],
            [-19.345, 2.453],
            [-19.654, 5.35],
            [-19.28, 5.421],
            [-18.928, 5.463],
          ],
          color: "yellow",
        },
        // ID=Z11
        {
          type: "poly",
          points: [
            [11.609, 9.162],
            [11.107, 13.106],
            [9.568, 12.882],
            [10.065, 8.966],
            [11.609, 9.162],
          ],
          color: "#feedb2",
        },
        // ID=Z17
        {
          type: "poly",
          points: [
            [4.428, 4.955],
            [3.324, 4.822],
            [3.558, 3.344],
            [4.631, 3.485],
            [4.428, 4.955],
          ],
          color: "#15ff09",
        },
        // ID=Z18
        {
          type: "poly",
          points: [
            [3.558, 3.344],
            [3.748, 1.885],
            [4.834, 2.017],
            [4.631, 3.485],
            [3.558, 3.344],
          ],
          color: "#15ff09",
        },
        // ID=Z13
        {
          type: "poly",
          points: [
            [7.061, 5.291],
            [4.428, 4.955],
            [4.631, 3.485],
            [7.283, 3.809],
            [7.061, 5.291],
          ],
          color: "#7cfffd",
        },
        // ID=Z14
        {
          type: "poly",
          points: [
            [7.283, 3.809],
            [4.631, 3.485],
            [4.834, 2.017],
            [7.447, 2.35],
            [7.283, 3.809],
          ],
          color: "#7cfffd",
        },
        // ID=Z12
        {
          type: "poly",
          points: [
            [10.065, 8.966],
            [10.028, 8.538],
            [9.915, 7.9],
            [9.751, 7.351],
            [9.493, 6.815],
            [9.176, 6.399],
            [8.752, 5.997],
            [8.186, 5.66],
            [7.518, 5.425],
            [7.061, 5.291],
            [7.283, 3.809],
            [12.286, 4.314],
            [11.609, 9.162],
            [10.065, 8.966],
          ],
          color: "#7cfffd",
        },
        // ID=Z15
        {
          type: "poly",
          points: [
            [12.286, 4.314],
            [7.283, 3.809],
            [7.447, 2.35],
            [7.447, 2.35],
            [8.23, 2.32],
            [8.987, 2.178],
            [9.564, 1.929],
            [10.203, 1.431],
            [10.539, 1.02],
            [10.879, 0.408],
            [11.121, -0.073],
            [11.308, -0.496],
            [12.814, -0.304],
            [12.286, 4.314],
          ],
          color: "#7cfffd",
        },
        // ID=w11
        {
          type: "poly",
          points: [
            [8.174, 47.91],
            [7.672, 51.809],
            [6.119, 51.624],
            [6.604, 47.708],
            [8.174, 47.91],
          ],
          color: "yellow",
        },
        // ID=w12
        {
          type: "poly",
          points: [
            [6.604, 47.708],
            [6.546, 47.155],
            [6.38, 46.397],
            [6.166, 45.798],
            [5.866, 45.273],
            [5.477, 44.819],
            [5.183, 44.6],
            [4.588, 44.26],
            [4.049, 44.104],
            [3.669, 44.029],
            [3.862, 42.533],
            [8.79, 43.132],
            [8.174, 47.91],
            [6.604, 47.708],
          ],
          color: "yellow",
        },
        // ID=w16
        {
          type: "poly",
          points: [
            [7.83, 38.217],
            [8.358, 34.308],
            [9.898, 34.516],
            [9.395, 38.419],
            [7.83, 38.217],
          ],
          color: "yellow",
        },
        // ID=w15
        {
          type: "poly",
          points: [
            [3.862, 42.533],
            [8.79, 43.132],
            [9.395, 38.419],
            [7.83, 38.217],
            [7.677, 38.587],
            [7.366, 39.204],
            [6.924, 39.812],
            [6.363, 40.383],
            [5.764, 40.76],
            [4.928, 40.992],
            [4.041, 41.021],
            [3.862, 42.533],
          ],
          color: "yellow",
        },
        // ID=w13
        {
          type: "poly",
          points: [
            [3.669, 44.029],
            [1.141, 43.698],
            [1.313, 42.187],
            [3.862, 42.533],
            [3.669, 44.029],
          ],
          color: "#7cfffd",
        },
        // ID=w14
        {
          type: "poly",
          points: [
            [1.313, 42.187],
            [1.515, 40.693],
            [4.041, 41.021],
            [3.862, 42.533],
            [1.313, 42.187],
          ],
          color: "#7cfffd",
        },
        // ID=w17
        {
          type: "poly",
          points: [
            [1.141, 43.698],
            [-0.115, 43.523],
            [0.079, 42.054],
            [1.313, 42.187],
            [1.141, 43.698],
          ],
          color: "#7cfffd",
        },
        // ID=w18
        {
          type: "poly",
          points: [
            [1.313, 42.187],
            [0.079, 42.054],
            [0.272, 40.533],
            [1.515, 40.693],
            [1.313, 42.187],
          ],
          color: "#7cfffd",
        },
        // ID=c11
        {
          type: "poly",
          points: [
            [-11.27, 6.094],
            [-10.941, 3.251],
            [-8.986, 3.495],
            [-9.371, 6.273],
            [-11.27, 6.094],
          ],
          color: "#7cfffd",
        },
        // ID=c12
        {
          type: "poly",
          points: [
            [-25.603, 4.337],
            [-25.346, 1.438],
            [-26.58, 1.386],
            [-26.786, 4.183],
            [-25.603, 4.337],
          ],
          color: "#7cfffd",
        },
        // ID=E11
        {
          type: "poly",
          points: [
            [-56.914, -0.021],
            [-56.6, -2.274],
            [-55.391, -2.107],
            [-55.751, 0.196],
            [-56.914, -0.021],
          ],
          color: "#7cfffd",
        },
        // ID=E12
        {
          type: "poly",
          points: [
            [-62.068, 1.117],
            [-59.428, 1.451],
            [-59.508, 2.016],
            [-62.173, 2.051],
            [-62.068, 1.117],
          ],
          color: "#7cfffd",
        },
        // ID=Z16
        {
          type: "poly",
          points: [
            [12.814, -0.304],
            [11.308, -0.496],
            [11.82, -4.415],
            [13.313, -4.226],
            [12.814, -0.304],
          ],
          color: "#feedb2",
        },
        // ID=K13
        {
          type: "line",
          x1: -56.728,
          y1: 2.351,
          x2: -5.493,
          y2: 9.02,
          color: "green",
          lineWidth: 1,
        },
        {
          type: "line",
          x1: -5.712,
          y1: 11.209,
          x2: -57.0,
          y2: 4.531,
          color: "green",
          lineWidth: 1,
        },
        {
          type: "line",
          x1: -62.173,
          y1: 2.051,
          x2: -61.493,
          y2: -3.09,
          x3: -56.363,
          y3: -2.422,
          color: "green",
          lineWidth: 1,
        },
        {
          type: "line",
          x1: -59.341,
          y1: 0.894,
          x2: -59.215,
          y2: -0.149,
          x3: -56.687,
          y3: 0.188,
          color: "green",
          lineWidth: 1,
        },
        {
          type: "line",
          x1: -56.464,
          y1: 0.256,
          x2: -55.235,
          y2: 0.707,
          x3: -54.856,
          y3: 0.794,
          x4: -50.246,
          y4: 1.361,
          x5: -31.617,
          y5: 3.824,
          x6: -19.654,
          y6: 5.35,
          x7: -19.28,
          y7: 5.421,
          x8: -10.344,
          y8: 6.571,
          color: "green",
          lineWidth: 1,
        },
        {
          type: "line",
          x1: -56.15,
          y1: -2.404,
          x2: -50.134,
          y2: -1.682,
          x3: -9.681,
          y3: 3.037,
          color: "green",
          lineWidth: 1,
        },

        {
          type: "line",
          x1: 4.479,
          y1: 4.962,
          x2: 4.428,
          y2: 4.955,
          color: "green",
          lineWidth: 1,
        },
        {
          type: "line",
          x1: 10.065,
          y1: 8.966,
          x2: 11.609,
          y2: 9.162,
          color: "green",
          lineWidth: 1,
        },
        {
          type: "line",
          x1: 7.83,
          y1: 38.217,
          x2: 9.395,
          y2: 38.419,
          color: "green",
          lineWidth: 1,
        },
        {
          type: "line",
          x1: 6.604,
          y1: 47.708,
          x2: 8.174,
          y2: 47.91,
          color: "green",
          lineWidth: 1,
        },
        {
          type: "line",
          x1: -9.681,
          y1: 3.037,
          x2: 4.422,
          y2: 5.713,
          x3: 8.19,
          y3: 8.318,
          x4: 8.053,
          y4: 12.774,
          x5: 5.381,
          y5: 13.459,
          x6: 1.475,
          y6: 13.665,
          x7: -5.712,
          y7: 11.209,
          color: "green",
          lineWidth: 1,
        },
        {
          type: "line",
          x1: -56.728,
          y1: 2.351,
          x2: -59.341,
          y2: 0.894,
          color: "green",
          lineWidth: 1,
        },
        {
          type: "line",
          x1: -10.344,
          y1: 6.571,
          x2: -5.493,
          y2: 9.02,
          color: "green",
          lineWidth: 1,
        },
        {
          type: "line",
          x1: -57.0,
          y1: 4.531,
          x2: -57.855,
          y2: 4.439,
          x3: -59.063,
          y3: 4.713,
          color: "green",
          lineWidth: 1,
        },
        {
          type: "line",
          x1: -59.063,
          y1: 4.713,
          x2: -62.574,
          y2: 4.165,
          x3: -62.173,
          y3: 2.051,
          color: "green",
          lineWidth: 1,
        },
        // 更多不规则矩形和线段...
      ],
      textInfo: "", //考生个人信息
      tjxx: "", //统计信息
      kcdt: "", //考车地图
      offsetLeft: "",
      offsetTop: "",
      intervalId2: null,
    };
  },
  components: {
    Video,
  },
  created() {
    // 110.34 后端本机   100.11远程
    this.socket = new WebSocket("ws://192.168.100.103:7789/WS"); // 替换为实际的WebSocket服务器URL
    this.socket.onopen = () => {
      // console.log("WebSocket connected");
    };
    //叉车socket数据实时刷新
    this.socket.onmessage = (event) => {
      let result = event.data.split("#");
      // console.log(result, "叉车socket数据");

      this.CLXHSTR = result[1].replace(/,/g, " ").split(" ");
      // console.log(this.CLXHSTR, "this.CLXHSTR ");

      this.GPSSTR = result[2];
      // console.log(result[3]);

      this.TDH = result[3].replace(/,/g, " ").split(" ");
      this.CX = result[4];
      this.STUSTR = result[5];
      this.textTime = this.STUSTR.replace(/,/g, " ").split(" ")[4];
      this.KCH = result[6];
      this.getTextInfo();
      if (this.KCH === "1号车") {
        localStorage.setItem("KCH", "1");
      }
      if (this.KCH === "2号车") {
        localStorage.setItem("KCH", "2");
      }
      if (this.KCH === "3号车") {
        localStorage.setItem("KCH", "3");
      }
      localStorage.setItem("STUSTR", result[5]);
      localStorage.setItem("CX", result[4]);
      localStorage.setItem("TDH", result[3]);
      localStorage.setItem("GPSSTR", result[2]);
      localStorage.setItem("CLXHSTR", this.CLXHSTR);
      //海康威视视频监控通道
      console.log(this.TDH, this.TDH[0], this.TDH[1], "摄像头通道号");
      // IP就是登陆摄像头时候的IP 4\5\13
      this.rtspurl1 = `rtsp://admin:yx123456@192.168.100.105:554/Streaming/Channels/${this.TDH[0]}01`;
      // console.log(this.rtspurl1);
      this.rtspurl2 = `rtsp://admin:yx123456@192.168.100.105:554/Streaming/Channels/${this.TDH[1]}01`;
      // console.log(this.rtspurl2);

      //叉车距离取值范围(0-5 0拖地 1落地 2地面-20 3 20-30 4超30 5高危运行)index19
      // console.log(localStorage.getItem("CLXHSTR"), this.CLXHSTR);

      switch (this.CLXHSTR[18]) {
        case "0":
          this.HCGD = "货叉拖地";
          break;
        case "1":
          this.HCGD = "货叉落地";
          break;
        case "2":
          this.HCGD = "地面-20";
          break;
        case "3":
          this.HCGD = "20-30";
          break;
        case "4":
          this.HCGD = "超30";
          break;
        default:
          this.HCGD = "高危运行";
          break;
      }
    };
    this.socket.onclose = () => {
      console.log("WebSocket closed");
    };
    this.getstateAsync();
    this.GetStuQueenAsync();
    this.GetWaitStusAsync();
  },
  mounted() {
    // 获取实时时间
    this.timeFn();
    // 视频静音
    this.controVolume();
    this.GetStatisticsAsync();
    this.GetCarInfoAsync();
    this.changeHandle("1");
    this.intervalId = setInterval(() => {
      this.drawShapes2();
    }, 200);
    this.GetStuInfoAsync();
    this.intervalId2 = setInterval(() => {
      this.GetStuInfoAsync();
    }, 10000);
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
    clearInterval(this.intervalId2);
    this.socket.close();
  },
  methods: {
    screenfull() {
      this.$nextTick(async () => {
        if (screenfull.isEnabled) {
          // 显示确认对话框
          const enterFullscreen = confirm("是否进入全屏模式？");

          if (enterFullscreen) {
            try {
              await screenfull.toggle(); // 开启/关闭全屏
              // console.log("全屏切换成功");
            } catch (error) {
              console.error("全屏请求被拒绝:", error);
              alert(
                "全屏请求被拒绝，请通过用户交互操作来启用全屏（如点击按钮）"
              );
            }
          }
        }
      });
    },
    //右上角当前日期时间显示：每一秒更新一次最新时间
    timeFn() {
      this.timing = setInterval(() => {
        //获取当前时分秒
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        //获取当前年月日
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        //获取当前周几
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    //监控视频静音
    controVolume() {
      this.$nextTick(() => {
        // this.$refs.video1.volume = 0;
        // this.$refs.video2.volume = 0;
      });
    },
    //考车地图
    drawShapes(x, y) {
      const canvas = this.$refs.canvas;
      canvas.height = 0;
      canvas.width = 0;
      canvas.height = 220;
      canvas.width = 490;
      const ctx = canvas.getContext("2d");
      ctx.translate(x, y);
      ctx.scale(6.5, -8);

      this.shapes.forEach((shape, index) => {
        if (shape.type === "poly") {
          ctx.fillStyle = shape.color;
          ctx.beginPath();
          ctx.moveTo(shape.points[0][0], shape.points[0][1]);
          shape.points.forEach((point, index) => {
            if (index > 0) {
              ctx.lineTo(point[0], point[1]);
            }
          });
          ctx.closePath();
          ctx.fill();
        } else if (shape.type === "line") {
          ctx.strokeStyle = shape.color;
          ctx.lineWidth = 0.5;
          ctx.beginPath();
          ctx.moveTo(shape.x1, shape.y1);
          ctx.lineTo(shape.x2, shape.y2);
          ctx.stroke();
        }
      });
    },
    drawShapes2() {
      const canvas = this.$refs.canvas2;
      canvas.height = 0;
      canvas.width = 0;
      canvas.height = 220;
      canvas.width = 490;
      // console.log(canvas.offsetX, "canvas");
      const ctx = canvas.getContext("2d");
      ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除之前的绘制

      let dataString = localStorage.getItem("GPSSTR");
      if (!dataString) return;

      let dataArray = dataString
        .split(",")
        .map((pair) => pair.trim().split(" "));

      // 解析坐标点
      let carOutline = [];
      for (let i = 0; i < dataArray.length; i++) {
        let x = parseFloat(dataArray[i][0]);
        let y = parseFloat(dataArray[i][1]);
        carOutline.push({ x, y });
      }
      // 剔除后8个轮胎点，只保留前面的车身轮廓点用于绘制轮廓
      let tirePoints = carOutline.slice(-8); // 取最后8个点作为轮胎
      let bodyPoints = carOutline.slice(0, -8); // 剩下的点作为车身轮廓
      /// 绘制车身轮廓（排除轮胎点）
      if (bodyPoints.length > 1) {
        ctx.beginPath();
        ctx.moveTo(bodyPoints[0].x * 6.5 + 400, -bodyPoints[0].y * 8 + 140);

        for (let i = 1; i < bodyPoints.length; i++) {
          ctx.lineTo(bodyPoints[i].x * 6.5 + 400, -bodyPoints[i].y * 8 + 140);
        }

        ctx.closePath();
        ctx.strokeStyle = "red";
        ctx.lineWidth = 1;
        ctx.stroke();
      }

      // 绘制8个轮胎点
      if (tirePoints.length === 8) {
        ctx.fillStyle = "red"; // 轮胎颜色为黑色
        const tireRadius = 2.5; // 轮胎半径

        for (let i = 0; i < 8; i++) {
          let x = tirePoints[i].x * 6.5 + 400;
          let y = -tirePoints[i].y * 8 + 140;

          ctx.beginPath();
          ctx.arc(x, y, tireRadius, 0, Math.PI * 2); // 绘制圆形轮胎
          ctx.fill();
        }
      }

      // ctx.translate(400, 140);
      // ctx.scale(6.5, -8);
      // let dataString = localStorage.getItem("GPSSTR");
      // let dataArray = dataString
      //   ?.split(",")
      //   .map((pair, index) => pair.split(" "));
      // dataArray?.splice(-8); //取消轮胎划线
      // // console.log(dataArray.splice(-8));
      // // 初始化一个空数组来存储对象
      // if (dataArray) {
      //   let rectanglePoints = [];
      //   dataArray.forEach((pair) => {
      //     let x = parseFloat(pair[0]);
      //     let y = parseFloat(pair[1]);
      //     rectanglePoints.push({ x: x, y: y });
      //   });
      //   // console.log("x:", rectanglePoints[0].x, "y:", rectanglePoints[0].y);
      //   if (rectanglePoints[0]) {
      //     console.log(rectanglePoints[0].x, "rectanglePoints[0].x ");
      //   } else {
      //     return;
      //   }

      //   // 绘制矩形
      //   ctx.beginPath();
      //   ctx.moveTo(rectanglePoints[0].x, rectanglePoints[0].y);
      //   for (let i = 1; i < rectanglePoints.length; i++) {
      //     ctx.lineTo(rectanglePoints[i].x, rectanglePoints[i].y);
      //   }
      //   ctx.closePath();
      //   ctx.strokeStyle = "red";
      //   ctx.lineWidth = 0.1;
      //   ctx.stroke();
      //   // console.log(canvas.getBoundingClientRect());
      // }
    },
    //考试信息websocket
    getTextInfo() {
      let result = this.STUSTR.replace(/,/g, " ").split(" ");
      console.log(result, "考试信息websocket");

      this.SFZ = result[0];
      this.ID = result[1];
      this.textNum = result[2];
      this.textTime = result[4];
      localStorage.setItem("SFZ", this.SFZ);
      localStorage.setItem("ID", this.ID);
      localStorage.setItem("textNum", this.textNum);
      if (result[3] == "1") {
        this.textType = "场考";
        localStorage.setItem("textType", "1");
      } else if (result[3] == "2") {
        this.textType = "路考";
        localStorage.setItem("textType", "2");
      }
    },
    //获取考生信息
    GetStuInfoAsync() {
      let data = {
        inKcbh:  localStorage.getItem("KCH"), //考车号
        inKslb: localStorage.getItem("textType"), //考试类型
        inDjc: this.textNum || localStorage.getItem("textNum"), //第几次
        inSfzmhm: this.SFZ || localStorage.getItem("SFZ"), //身份证
        inKsid: this.ID || localStorage.getItem("ID"),
      };
      console.log(data, "获取考生信息111");
      $api
        .GetStuInfoAsync({
          inKcbh: localStorage.getItem("KCH"), //考车号
          inKslb: localStorage.getItem("textType"), //考试类型
          inDjc: this.textNum || localStorage.getItem("textNum"), //第几次
          inSfzmhm: this.SFZ || localStorage.getItem("SFZ"), //身份证
          inKsid: this.ID || localStorage.getItem("ID"),
          // inKcbh: "1", //考车号
          // inKslb: "1", //考试类型
          // inDjc: "1", //第几次
          // inSfzmhm: "340123198910122371", //身份证
          // inKsid: "7228",
        })
        .then((res) => {
          console.log(res, "获取考生信息");

          if (res.status == "200") {
            this.textInfo = res.data.data;
          }
        });
    },
    //获取统计信息
    GetStatisticsAsync() {
      $api.GetStatisticsAsync({}).then((res) => {
        if (res.status == "200") {
          this.tjxx = res.data.data;
        }
      });
    },
    GetCarInfoAsync() {
      $api.GetCarInfoAsync({}).then((res) => {
        if (res.status == "200") {
          this.options2 = [];
          let result = res.data.data;
          // this.value2 = res.data.data[0].kcbh;
          result.forEach((item, index) => {
            this.options2.push({
              value: index,
              label: item.kcbh,
            });
          });
        }
      });
    },
    changeHandle(e) {
      const canvas = this.$refs.canvas;
      canvas.height = 0;
      canvas.width = 0;
      canvas.height = 200;
      canvas.width = 430;

      if (e == "0") {
        $api.GetCarInfoAsync({}).then((res) => {
          if (res && res.status == "200") {
            this.kcdt = res.data.data[0].kcdt;
            const parseData = this.parseData(this.kcdt);
            this.shapes = parseData;
            this.drawShapes(400, 140);
            // console.log(this.kcdt, "this.kcdt");

            // console.log(parseData, "parseData");
          }
        });
      }
      if (e == "1") {
        $api.GetCarInfoAsync({}).then((res) => {
          if (res.status == "200") {
            this.kcdt = res.data.data[1].kcdt;
            const parseData = this.parseData(this.kcdt);
            this.shapes = parseData;
            this.drawShapes(400, 140);
          }
        });
      }
    },
    parseData(text) {
      const lines = text.split("\n");
      const result = [];
      let currentPoints = [];
      let currentType = "";
      let currentColor = "#7cfffd"; // 默认颜色

      lines.forEach((line) => {
        const trimmedLine = line.trim();

        if (trimmedLine.startsWith("ID=")) {
          // 如果已经存在对象，先将其推入结果数组
          if (currentPoints.length > 0) {
            if (currentType === "poly") {
              result.push({
                type: "poly",
                points: currentPoints,
                color: currentColor,
              });
            } else if (currentType === "line" && currentPoints.length === 2) {
              result.push({
                type: "line",
                x1: currentPoints[0][0],
                y1: currentPoints[0][1],
                x2: currentPoints[1][0],
                y2: currentPoints[1][1],
                color: "green",
                lineWidth: 1,
              });
            }
          }
          // 重置当前对象和点集
          currentPoints = [];
          currentType = trimmedLine.startsWith("ID=K" || "ID=")
            ? "line"
            : "poly";
        } else if (trimmedLine === "END" || trimmedLine === "ENDLINE") {
          // 如果是最后一个对象，添加它到结果数组中
          if (currentPoints.length > 0) {
            if (currentType === "poly") {
              result.push({
                type: "poly",
                points: currentPoints,
                color: currentColor,
              });
            } else if (currentType === "line" && currentPoints.length === 2) {
              result.push({
                type: "line",
                x1: currentPoints[0][0],
                y1: currentPoints[0][1],
                x2: currentPoints[1][0],
                y2: currentPoints[1][1],
                color: "green",
                lineWidth: 0.5,
              });
            }
          }
          // 重置对象以便下一个图形使用
          currentPoints = [];
          currentType = "";
        } else {
          // 处理坐标点
          const [x, y] = trimmedLine.split(",").map(Number);
          currentPoints.push([x, y]);
        }
      });

      // 处理最后一个对象
      if (currentPoints.length > 0) {
        if (currentType === "poly") {
          result.push({
            type: "poly",
            points: currentPoints,
            color: currentColor,
          });
        } else if (currentType === "line" && currentPoints.length === 2) {
          result.push({
            type: "line",
            x1: currentPoints[0][0],
            y1: currentPoints[0][1],
            x2: currentPoints[1][0],
            y2: currentPoints[1][1],
            color: "green",
            lineWidth: 1,
          });
        }
      }

      return result;
    },
    maskIdCard(idCard) {
      if (idCard) {
        return "****" + idCard.slice(-4);
      }
    },
    getstateAsync() {
      $api.GetStuQueenAsync({}).then((res) => {
        if (res && res.data.data) {
          this.GetStuQueen = res.data.data[0];
        }
      });
      $api.GetWaitStusAsync({}).then((res) => {
        if (res && res.data.data) {
          this.GetWaitStus = res.data.data;
        }
      });
    },
    // 大屏考生排队
    GetStuQueenAsync() {
      setInterval(() => {
        $api.GetStuQueenAsync({}).then((res) => {
          if (res.data.data) {
            this.GetStuQueen = res.data.data[0];
          }
        });
      }, 30000);
    },
    // 实操候考
    GetWaitStusAsync() {
      setInterval(() => {
        $api.GetWaitStusAsync({}).then((res) => {
          // console.log(res, "实操考试排队考生");

          if (res.data.data) {
            this.GetWaitStus = res.data.data;
          }
        });
      }, 30000);
    },
  },
};
</script>

<style lang="scss" scoped>
canvas {
  // border: 1px dashed #ccc;
}
video {
  width: 8rem;
}
.dp_content {
  width: 100%;
  height: 100vh; /* 使用100%的视口高度 */
  background-image: url(../assets/dpPicture/bgp.png);
  background-position: center; /* 背景图居中显示 */
  background-repeat: no-repeat; /* 不重复背景图 */
  background-size: cover; /* 背景图覆盖整个容器 */
  text-align: center;
  overflow: auto;
  .dp_nav {
    padding: 0.28rem 0;
    width: 100vw;
    height: 0.71rem;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    .dp_title1 {
      .title1_select {
        display: flex;
        justify-content: space-around;
        font-size: 0.18rem;
        .screenfull {
          color: #e9e9e9;
          font-size: 0.18rem;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        & > div {
          width: 1.72rem;
          height: 0.34rem;
          line-height: 0.34rem;
          background-image: url(../assets/dpPicture/navBgi.png);
          background-size: contain;
          background-repeat: no-repeat;
          ::v-deep .el-input__inner {
            width: 1.62rem;
            height: 0.3rem;
            border: none;
            background-color: rgba($color: #000000, $alpha: 0);
            color: #01c2ff;
          }
          ::v-deep .el-input__icon {
            line-height: 0;
          }
        }
      }
    }
    .dp_title2 {
      font-size: 0.36rem;
      color: #ffffff;
      letter-spacing: 0.1rem;
      .title {
        font-family: 造字工房坚黑体;
      }
    }
    .dp_title3 {
      font-size: 0.24rem;
      color: #ffffff;
      .dp_timer {
        display: flex;
        justify-content: space-around;
        padding: 0.04rem 0;
        .timer_same {
          color: #45a2ff;
        }
      }
    }
  }
  .dp_article {
    margin: 0rem 0.28rem;
    display: flex;
    justify-content: space-between;
    .article_left {
      width: 4.92rem;
      // border: .01rem solid red;
      .examinee_info {
        .examinee_top {
          width: 4.92rem;
          height: 0.34rem;
          background-image: url(../assets/dpPicture/examinee_top.png);
          background-size: contain;
          background-repeat: no-repeat;
          display: flex;
          align-items: center;
          line-height: 0.34rem;
          font-size: 0.24rem;
          font-weight: bold;
          color: #0094ff;
          margin-bottom: 0.5rem;
          img {
            width: 0.3rem;
            height: 0.3rem;
            margin-left: 0.3rem;
          }
        }
        .examinee_under {
          width: 4.52rem;
          height: 1.82rem;
          margin: 0.31rem auto;
          // border: .01rem solid red;
          display: flex;
          justify-content: space-around;
          img {
            width: 1.55rem;
            height: 1.82rem;
          }
          .name {
            display: flex;
            div {
              color: #ffffff;
              font-size: 0.24rem;
              font-weight: bold;
            }
            span {
              color: #029800;
              font-size: 0.24rem;
              font-weight: bold;
            }
          }
          .idcard,
          .textNum {
            display: flex;
            margin-top: 0.2rem;
            div {
              color: #ffffff;
              font-size: 0.18rem;
            }
            span {
              color: #05f0ff;
              font-size: 0.18rem;
            }
          }
          .car_num {
            width: 1.57rem;
            height: 0.47rem;
            margin-top: 0.2rem;
            color: #29f1fa;
            font-size: 0.24rem;
            text-align: center;
            line-height: 0.46rem;
            background-image: url(../assets/dpPicture/chehao.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }
        }
      }
      .camera_info {
        .camera_top {
          width: 4.92rem;
          height: 0.34rem;
          background-image: url(../assets/dpPicture/examinee_top.png);
          background-size: contain;
          background-repeat: no-repeat;
          display: flex;
          align-items: center;
          line-height: 0.34rem;
          font-size: 0.24rem;
          font-weight: bold;
          color: #0094ff;
          margin-top: 0.6rem;
          img {
            width: 0.36rem;
            height: 0.36rem;
            margin-left: 0.3rem;
          }
        }
        .camera_under {
          width: 4.52rem;
          height: 1.82rem;
          margin: 0.43rem auto;
          // border: .01rem solid red;
          display: flex;
          .score {
            width: 2.14rem;
            height: 1.34rem;
            border: 0.02rem solid #147bb7;
            margin-right: 0.31rem;
            padding: 0.24rem;
            .tips {
              color: #ffffff;
              font-size: 0.16rem;
              margin-right: 1.4rem;
            }
            .num {
              display: flex;
              align-items: end;
              margin: 0.24rem 0 0 0.6rem;
              span {
                font-size: 0.64rem;
                color: #05f0ff;
                font-weight: bold;
                margin-right: 0.29rem;
              }
              div {
                color: #ffffff;
                font-size: 0.24rem;
              }
            }
          }
          .status {
            & > div {
              display: flex;
              align-items: center;
              margin-bottom: 0.7rem;
              img {
                width: 0.56rem;
                height: 0.56rem;
                margin-right: 0.1rem;
              }
              div {
                text-align: left;
                span {
                  color: #ffffff;
                  font-size: 0.16rem;
                }
                div {
                  color: #ffffff;
                  font-size: 0.24rem;
                  font-weight: bold;
                }
              }
            }
          }
        }
      }
      .deduction_info {
        .deduction_top {
          width: 4.92rem;
          height: 0.34rem;
          background-image: url(../assets/dpPicture/examinee_top.png);
          background-size: contain;
          background-repeat: no-repeat;
          display: flex;
          align-items: center;
          line-height: 0.34rem;
          font-size: 0.24rem;
          font-weight: bold;
          color: #0094ff;
          margin: 0.45rem 0 0.45rem 0;
          img {
            width: 0.36rem;
            height: 0.36rem;
            margin-left: 0.3rem;
          }
        }
        .deduction_under {
          // margin-top: 20px;
          .el-carousel__item {
            background-image: linear-gradient(
              to right,
              #003584,
              #0d59a9,
              #228de5
            );
            border-radius: 0.1rem;
          }
          .el-carousel__item h3 {
            color: #475669;
            font-size: 0.14rem;
            opacity: 0.75;
            line-height: 1.8rem;
            text-align: center;
            margin: 0;
          }

          .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
          }

          .el-carousel__item:nth-child(2n + 1) {
            background-color: #d3dce6;
          }
          .deduction_score {
            font-size: 0.14rem;
            color: #ffffff;
            & > div {
              margin-top: 0.2rem;
              span {
                color: #e20000;
                font-size: 0.24rem;
                font-weight: bold;
              }
              .deduction_info {
              }
            }
          }
        }
      }
    }
    .article_center {
      width: 8.15rem;
      // border: .01rem solid red;
      text-align: center;
      .cab,
      .site {
        width: 7.85rem;
        height: 4.28rem;
        background-image: url(../assets/dpPicture/cab.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-bottom: 0.15rem;
      }
      .cab,
      .site {
        padding: 0.15rem 0;

        & > div:nth-of-type(1) {
          color: #18fefe;
          font-weight: bold;
          font-size: 0.16rem;
          text-align: left;
          margin: 0 0 0.1rem 0.3rem;
        }
        & > div:nth-of-type(2) {
          div {
            font-size: 0.16rem;
            color: #c0ddff;
          }
          img {
            width: 0.76rem;
            height: 0.76rem;
            margin: 1.37rem 0 0.46rem 0;
          }
          p {
            color: #01c2ff;
            font-size: 0.24rem;
          }
        }
      }
    }
    .article_right {
      width: 4.92rem;
      .operation_info {
        .operation_top {
          width: 4.92rem;
          height: 0.34rem;
          background-image: url(../assets/dpPicture/examinee_top.png);
          background-size: contain;
          background-repeat: no-repeat;
          display: flex;
          align-items: center;
          line-height: 0.34rem;
          font-size: 0.24rem;
          font-weight: bold;
          color: #0094ff;

          img {
            width: 0.36rem;
            height: 0.36rem;
            margin-left: 0.3rem;
          }
        }
        .position_info {
          display: flex;
          justify-content: start;
          align-items: center;
          width: 4.8rem;
          height: 0.29rem;
          margin: 0.12rem auto;
          background-color: #053159;
          span {
            width: 1.7rem;
            color: #ffffff;
            font-size: 0.14rem;
          }
          p {
            width: 100%;
            height: 0.17rem;
            flex-wrap: nowrap;
            overflow: hidden;
            color: #18fefe;
            font-size: 0.14rem;
          }
        }
        .content_info {
          display: flex;
          justify-content: space-around;
          font-size: 0.14rem;
          & > div:nth-of-type(1) {
            width: 1.83rem;
            height: 0.32rem;
            background-color: #0b4157;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            span {
              color: #ffffff;
            }
            p {
              color: #18fefe;
            }
          }
          & > div:nth-of-type(2) {
            width: 1.75rem;
            height: 0.32rem;
            background-color: #0b4157;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            span {
              color: #ffffff;
            }
            p {
              color: #fa5151;
            }
          }
          & > div:nth-of-type(3) {
            width: 0.96rem;
            height: 0.32rem;
            background-color: #0b4157;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            img {
              width: 0.2rem;
              height: 0.15rem;
            }
            p {
              color: #fa5151;
            }
          }
        }
        .icon_info {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          margin: 0.28rem 0 0.2rem 0;
          justify-content: space-between;
          & > div {
            width: 0.5rem;
            margin: 0.1rem;
            img {
              width: 0.28rem;
              height: 0.28rem;
              margin-bottom: 0.09rem;
            }
            div {
              color: #ffffff;
            }
          }
        }
      }
      .lines_info {
        width: 100%;
        height: 2.61rem;
        background-image: url(../assets/dpPicture/guiji.png);
        background-size: 100% 100%;
        text-align: left;
        & > div {
          padding: 0.04rem 0.14rem;
          & > div {
            span {
              color: #18fefe;
              font-size: 0.16rem;
            }
            div {
              width: 0.33rem;
              height: 0.1rem;
              margin-top: 0.03rem;
              background-image: url(../assets/dpPicture/guijixian.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
            }
          }
        }
      }
      .statistics {
        text-align: left;
        .statistics_content {
          margin-top: 10px;
          width: 100%;
          height: 155px;
          overflow: hidden;
          border: 1px solid rgb(4, 75, 142);
        }
        .statistics_dd,
        .statistics_pd {
          color: #ffffff;
          margin-bottom: 10px;
          & > .title {
            color: #0084ff;
            margin-bottom: 10px;
            font-size: 18px;
          }
          & > .info_message {
            color: #06f0ff;
            font-size: 20px;
            display: flex;
            justify-content: space-evenly;
          }

          & > .content_message > div {
            color: #06f0ff;
            font-size: 20px;
            display: flex;
            margin-bottom: 8px;
            justify-content: space-around;
          }
        }
        .operation_top {
          width: 4.92rem;
          height: 0.34rem;
          background-image: url(../assets/dpPicture/examinee_top.png);
          background-size: contain;
          background-repeat: no-repeat;
          display: flex;
          align-items: center;
          line-height: 0.34rem;
          font-size: 0.24rem;
          font-weight: bold;
          color: #0094ff;
          margin-top: 0.2rem;
          img {
            width: 0.36rem;
            height: 0.36rem;
            margin-left: 0.3rem;
          }
        }
        .operation_info {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          margin-top: 0.2rem;
          .info_card {
            width: 2.3rem;
            height: 0.8rem;
            background-image: url(../assets/dpPicture/shujutongji.png);
            display: flex;
            align-items: center;
            margin-bottom: 0.15rem;
            img {
              width: 0.48rem;
              height: 0.48rem;
              margin: 0 0.2rem;
            }
            .card_right {
              & > div {
                display: flex;
                align-items: center;
                p {
                  color: #ffffff;
                  font-size: 0.14rem;
                }
                span {
                  color: #ffffff;
                  font-size: 0.24rem;
                  font-weight: bold;
                  margin-right: 0.12rem;
                }
              }
              span {
                color: #ffffff;
                font-size: 0.14rem;
              }
            }
          }
        }
      }
    }
  }
}
</style>
